<%@page import="edu.egypt.model.Permission"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel = "stylesheet" href = "bootstrap/css/bootstrap.css" />
<link rel = "stylesheet" href = "bootstrap/css/style.css" />
<script type = "text/javascript" src = "bootstrap/js/jquery-1.11.0.min.js"></script>
<script type = "text/javascript" src = "bootstrap/js/bootstrap.js"></script>
<title>Role Page</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
var dat;
</script>
<style type="text/css">
.hidden{display:none;}
</style>
</head>
<body>
	
	<div class = "myPermissions">
		<div class = "row">
			<div class = "col-lg-12">
				<div class = "panel panel-success">
				<div class = "panel-heading"> <h4>Roles</h4></div>
					<div class = "panel-body">
						<center><img src = "bootstrap/images/logo_ibm.png" width = "90" height = "50"></center>
						<hr>
						<div class = "table-responsive" style = "margin-top:3%;">
						<table class = "table" border = "0">
							<tr><th>ID</th><th>Name</th><th>Description</th></tr>
							
		                    <tr><td><c:out value="${role.id}" /></td><td>
		                    <div class = "form-group">
							<input type = "text" name = "perName"  class = "form-control" placeholder = "Permission Name"  value="${role.name}">
							</div>
							</td><td>
							<div class = "form-group">
							<textarea class="form-control" name = "perDescription" placeholder = "Permission description" rows="3"  > <c:out value="${role.description}"/> </textarea>
							</div>
		                    </td><td>
		                    </tr>
 	                        
 	                        
						</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
    <table id="table" class="table" border=1>
    <tr>
        <th>Name</th>
        <th>Assigned</th>

    </tr>
    </table>
    <button onclick="fJson()"> Submit</button>
    
<script>
var str= <%= ((Permission)request.getAttribute("role")).getId() %>

$(document).ready(function() {
$.getJSON("./PermissionsAjaxResponse",{id:str},function(data) {
	dat=data;
	if(data){
        var len = data.length;
        var txt = "";
        if(len > 0){
            for(var i=0;i<len;i++){
                if(data[i].name && data[i].assigned){
                	//data[i].assigned
                	if(data[i].assigned=="YES"){
                    txt += "<tr><td>"+data[i].name+"</td><td>"+"<input type='checkbox' checked='checked' id="+data[i].id+" onchange='fListen("+i+")' name='checkme' >"+"</td></tr>";
                	}
                    else{
                    txt += "<tr><td>"+data[i].name+"</td><td>"+"<input type='checkbox' id="+data[i].id+" onchange='fListen("+i+")' name='checkme'>"+"</td></tr>";	
                    }
                }
            }
            if(txt != ""){
                $("#table").append(txt).removeClass("hidden");
            }
        }
    }
	});


});
function fListen(ind)
{
	if(dat[ind].assigned=="YES"){
		dat[ind].assigned="NO";
	}
	else
		{
		dat[ind].assigned="YES";
		}
}
function fJson()
{
	$.ajax({
	    type: 'GET',
	    url: './putJsonIntoDB?id=${role.id}',
	    dataType: 'JSON',
	    data:{
	        data: JSON.stringify(dat)
	    }
	})
	alert("Done!!");
	window.location ="./ShowRolePermission";
}
</script>
    
</body>
</html>